<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>VDO.Ninja Cloud Sync Setup</title>
    <style>
      :root {
        color-scheme: dark;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: #04070f;
        color: #f4f8ff;
      }
      body {
        margin: 0;
        padding: 0 16px 32px;
        line-height: 1.5;
      }
      header {
        padding: 32px 0 8px;
      }
      h1 {
        margin: 0 0 8px;
        font-size: clamp(1.8rem, 2.4vw, 2.6rem);
      }
      h2 {
        margin-top: 32px;
        font-size: 1.3rem;
      }
      h3 {
        margin-top: 18px;
        font-size: 1rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      p {
        max-width: 720px;
      }
      a {
        color: #8fc6ff;
      }
      ol {
        max-width: 760px;
        padding-left: 20px;
      }
      code {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        padding: 2px 4px;
        font-size: 0.9rem;
      }
      .card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 18px;
        margin-top: 18px;
        max-width: 820px;
      }
      .note {
        font-size: 0.9rem;
        opacity: 0.75;
      }
      @media (max-width: 640px) {
        body {
          padding: 0 12px 24px;
        }
        .card {
          padding: 16px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <p>VDO.Ninja · Cloud Sync Guide</p>
      <h1>Configure Google Drive & Dropbox uploads</h1>
      <p>
        The podcast studio can stream each local recording chunk to cloud storage for redundancy. Use the steps below
        to authorize the built-in Google Drive integration or to generate a Dropbox personal access token that the
        studio can store locally.
      </p>
    </header>

    <section id="google-drive" class="card">
      <h2>Google Drive (built-in OAuth)</h2>
      <ol>
        <li>Open the podcast studio (`?studio=podcast`) and locate the <strong>Cloud Sync</strong> card.</li>
        <li>Click <em>Link Google Drive</em>. Google Identity Services opens a popup window.</li>
        <li>Pick the Google account that will own the uploads and approve the <code>drive.file</code> scope.</li>
        <li>
          Once the popup closes, the status pill switches to “Linked” and future recordings stream into your Drive root
          (or the custom folder configured via <code>&amp;gdrivefolder=YourFolder</code>).
        </li>
      </ol>
      <p class="note">
        The Drive token stays in the browser session. Re-click the button whenever the token expires or if you switch
        accounts.
      </p>
    </section>

    <section id="dropbox" class="card">
      <h2>Dropbox (OAuth + refresh tokens)</h2>
      <p>
        The Dropbox integration now mirrors the Google Drive workflow: clicking <em>Link Dropbox</em> opens an OAuth
        popup, requests the <code>files.content.write</code> / <code>files.metadata.write</code> scopes, and stores a
        refresh token locally so future sessions can renew access automatically. No server-side helpers are required—the
        entire exchange happens in your browser.
      </p>
      <h3>Authorize via OAuth</h3>
      <ol>
        <li>Open the podcast studio (`?studio=podcast`) and scroll to the <strong>Cloud Sync</strong> card.</li>
        <li>Click <em>Link Dropbox</em>. Allow the popup (make sure your browser isn’t blocking it).</li>
        <li>
          Sign in with the Dropbox account that should receive uploads and approve the requested scopes. The popup will
          close once the code exchange completes.
        </li>
        <li>The studio status should switch to “Dropbox linked. Recordings will upload automatically.”</li>
      </ol>
      <p class="note">
        Tokens never leave your browser. We store the refresh token (and the most recent short-lived access token) inside
        <code>localStorage</code> so background uploads can reconnect silently even after several hours.
      </p>
      <h3>Manual fallback token (optional)</h3>
      <p>
        If you need an emergency override—e.g., when the OAuth popup cannot run inside a kiosk build—you can still paste
        a personal access token into the Dropbox field:
      </p>
      <ol>
        <li>
          Visit
          <a href="https://www.dropbox.com/developers/apps" target="_blank" rel="noopener"
            >https://www.dropbox.com/developers/apps</a
          >, open your scoped app, and click <em>Generate access token</em>.
        </li>
        <li>Copy the token, paste it into the Cloud Sync token box, then click <strong>Link Dropbox</strong>.</li>
        <li>
          You can also launch the studio with <code>?dropbox=YOUR_TOKEN</code>; the textbox will populate automatically.
        </li>
      </ol>
      <p class="note">
        Dropbox’s generated tokens expire quickly (typically ~4 hours) and do not refresh. Prefer the OAuth link unless
        you’re temporarily sidestepping browser restrictions.
      </p>
    </section>
  </body>
</html>
